<template>
    <rx-dialog @handOk="okFun" @cancel="cancelFun">
        <rx-layout>
            <div slot="center" style>
                <rx-fit>
                    <rx-grid
                        ref="table"
                        :allowRowSelect="false"
                        :multiSelect="false"
                        :columns="columns"
                        :defaultPageSize="10"
                        url="/api-system/system/core/sysMenuRelease/query"
                        :queryParam="queryParam"
                        data-field="result.data"
                        :show-page="false"
                        :pageSizeOptions="['10','30','40']"
                        id-field="id"
                        :bordered="true"
                        @selectChange="onSelectChange"
                        :handRowClass="handRowClass"
                    >
                        <span slot="menuName" slot-scope="{ text, record }">
                            {{$i18(text,"菜单名称国际化")}}
                        </span>
                        <span slot="releaseUrl" slot-scope="{ text, record }">
                         {{ spliceUrlI18n(text) }}
                        </span>
                        <span slot="status" slot-scope="{ text, record }">
                            <a-tag v-if="text" :color="getStatusColor(text)">
                                <span>{{getStatusText(text)}}</span>
                            </a-tag>
                        </span>
                    </rx-grid>
                </rx-fit>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import SysMenuReleaseApi from '@/api/system/core/sysMenuRelease'
import {BaseList, RxDialog, Util, RxGrid} from "@lowcode/jpaas-common-lib";

export default {
    name: 'SysMenuReleaseList',
    mixins: [BaseList],
    components: {
        RxDialog
    },
    props: {
        releaseId: {
            type: String,
            default: ""
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        }
    },
    data() {
        return {
            resultData: [],
            columns: [
                {
                    title: this.$ti18('rxList.index', '序号'),
                    type: 'indexColumn',
                    width: 30,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {
                    title: this.i18n('form.menuName', '菜单名称'),
                    dataIndex: 'menuName',
                    width: 70,
                    scopedSlots: {customRender: 'menuName'}
                },
                {
                    title: this.i18n('form.releaseUrl', '发布路径'),
                    dataIndex: 'releaseUrl',
                    width: 200,
                    scopedSlots: {customRender: 'releaseUrl'}
                },
                {
                    title: this.i18n('form.status', '发布状态'),
                    dataIndex: 'status',
                    width: 70,
                    scopedSlots: {customRender: 'status'}
                }
            ],
            comment: this.i18n('list.comment', '发布菜单路径记录表'),
            widthHeight: ['800px', '600px'],
            statusMap: {
                "YES": {color: 'green', text: this.i18n('map.valid','有效')},
                "NO": {color: 'red', text: this.i18n('map.invalid','无效')},
            },
        }
    },
    created() {
        this.getListByReleaseId(this.releaseId);
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "sysMenu", key);
        },
        spliceUrlI18n(releaseUrl){
            var replaceUrl=releaseUrl.replaceAll("}-","}@")
            let urls=replaceUrl.split("@");
            let newUrls=""
            for (let url of urls){
                newUrls+=this.$i18(url)+"--";
            }
            newUrls = newUrls.substring(0, newUrls.lastIndexOf("--"));
            return newUrls;
        },
        getListByReleaseId(releaseId) {
            this.queryParam.Q_RELEASE_ID__S_EQ = releaseId;
        },
        okFun() {
            Util.closeWindow(this, "ok");
        },
        cancelFun() {
            Util.closeWindow(this, "cancel");
        },
        handRowClass(record){
            if(record.status=='NO' ){
                return 'grayRow';
            }
            return '';
        },
        getStatusColor(text){
            return this.statusMap[text]?this.statusMap[text].color:'red';
        },
        getStatusText(text) {
            return this.statusMap[text]?this.statusMap[text].text:'无效';
        }
    }
}
</script>
<style scoped>

</style>

